<template>
  <div class="login">
    <div class="header">
      <div class="logo2">
        <div class="logo-content">
          <img src="@/assets/images/logo.png" alt="" />
          <h1>东湖新技术开发区智慧网格系统</h1>
        </div>
      </div>
    </div>
    <div class="wrap">
      <div class="left">
        <p>WELCOME TO SCRM SYSTEM</p>
        <p>数据列表分析 可视化数据查询</p>
        <p>区块链驱动--社区管理就是这么简单</p>
      </div>
      <div class="loginBox">
        <div class="loginInner">
          <div class="box">
            <div class="logo">
              <img src="@/assets/images/logo.png" alt="" />
              <p>东湖新技术开发区网格系统</p>
            </div>
            <div class="form">
              <h2>用户登录</h2>
              <div class="item">
                <img src="@/assets/images/login-user.png" alt="" />
                <input type="text" placeholder="请输入用户名" />
              </div>
              <div class="item">
                <img src="@/assets/images/login-password.png" alt="" />
                <input type="password" placeholder="请输入用户密码" />
              </div>
              <div class="aboutPassword">
                <div class="identity-select">
                  <a>选择身份: </a>
                  <select id="identity" v-model="selectedIdentity">
                    <option value="user">用户</option>
                    <option value="admin">管理员</option>
                  </select>
                </div>
                <el-checkbox label="记住密码"></el-checkbox>
                <a href="javascript:;">忘记密码?</a>
              </div>
              <a href="javascript:;" class="btn" @click="login()">登录</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "loginPage",

  data() {
    return { selectedIdentity: "user" };
  },

  mounted() {},

  methods: {
    login() {
      // 根据选定的身份进行登录处理
      // 使用sessionStorage记录登录信息
      if (this.selectedIdentity === "user") {
        sessionStorage.setItem("loginName","user");
        this.$router.push({ name: "guideUser" });
      } else if (this.selectedIdentity === "admin") {
        sessionStorage.setItem("loginName","admin")
        this.$router.push({ name: "guide" });
      }
    },
  },
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 106px;
  background-color: #809cd5;
  display: flex;
  align-items: center;
}

.logo-content {
  display: flex;
  align-items: center;
}

.logo-content img {
  height: 106px;
}

.logoImg {
  width: 496px;
  margin-left: 30px;
}
.wrap {
  color: #fff;
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  height: calc(100% - 106px);
  padding: 0 6%;
  justify-content: space-between;
}
.wrap .left {
  line-height: 1.8;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  letter-spacing: 2px;
}
.wrap .left p:first-child {
  font-size: 30px;
}
.wrap .left p:nth-child(2) {
  font-size: 44px;
}
.wrap .left p:nth-child(3) {
  font-size: 32px;
}
.loginBox {
  width: 833px;
  height: 504px;
  background: url("@/assets/images/login-bg.png") no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loginInner {
  width: 794px;
  height: 468px;
  background-color: rgba(255, 255, 255, 0.2);
  border: solid 1px #0a2455;
  padding: 15px;
}
.box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: solid 1px #1a8bff;
  padding: 0 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box .logo img {
  width: 230px;
  margin-bottom: 20px;
}
.box .logo {
  font-size: 23px;
  color: #1a0036;
}
h2 {
  font-size: 30px;
  color: #8c2c4d;
  text-align: center;
  margin-bottom: 35px;
}
.form {
  width: 317px;
  font-family: "微软雅黑";
}
.form .item {
  height: 44px;
  width: 100%;
  border: solid 1px #1d4daf;
  margin-bottom: 40px;
  align-items: center;
  display: flex;
  padding-left: 12px;
}
.form .item input {
  flex: 1;
  height: 16px;
  border: none;
  border-left: solid 2px #1d4daf;
  margin-left: 10px;
  padding-left: 16px;
  font-size: 16px;
  outline: none;
}
.form .btn {
  width: 100%;
  height: 44px;
  border-radius: 5px;
  font-size: 20px;
  color: #fff;
  background-color: #5751ed;
  display: block;
  text-align: center;
  line-height: 44px;
  background-image: linear-gradient(365deg, #5a49ea 0%, #2fbafb 100%);
}

input::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: rgba(29, 125, 175, 0.5);
  font-size: 16px;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: rgba(29, 125, 175, 0.5);
  font-size: 16px;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: rgba(29, 125, 175, 0.5);
  font-size: 16px;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgba(29, 125, 175, 0.5);
  font-size: 16px;
}
input::-ms-input-placeholder {
  /* Microsoft Edge */
  color: rgba(29, 125, 175, 0.5);
  font-size: 16px;
}
.aboutPassword {
  margin-bottom: 30px;

  display: flex;
  justify-content: space-between;
}
.aboutPassword a {
  font-size: 12px;
  color: #324bca;
}

.logo2 {
  display: flex;
  align-items: center;
}

.logo-content {
  display: flex;
  align-items: center;
}

.logo-content img {
  margin-right: 10px; /* 调整图片和文本之间的间距 */
}
</style>
